<template>
	<view class="content">
		<view class="item_div" v-for="(item,index) in data_list" :key="item.id" @click.stop="onItemClick(item)">
			<view style="display: flex;align-items: center;font-weight: bold;">
				<view style="margin: 0 36rpx 0 0;">{{item.name || '暂未填写'}}</view>
				<view>{{item.mobile || '暂未填写'}}</view>
			</view>
			<view style="margin: 8rpx 0 0 0;">{{item.province}}{{item.city}}{{item.county}}{{item.address}}</view>

			<!-- 操作按钮 -->
			<view class="op_btn_div">
				<view class="btn2" @click.stop="onEdit(item)">编辑</view>
				<view class="btn3" @click.stop="onDel(item)">删除</view>
			</view>

			<view style="height: 4rpx;width: 100%;background-color: #f0f0f0;margin: 16rpx 0 0 0;"></view>

		</view>

		<view v-if="!data_list || data_list.length <= 0" style="width: 100%;height: 40vh;line-height: 40vh;text-align: center;">
			暂无数据~
		</view>

		<!-- 占位布局 -->
		<view style="width: 100%;height: 120rpx;"></view>

		<view class="bottom_btn_div">
			<view id="btn_ok" @click.stop="onOk">＋添加地址</view>
		</view>

	</view>
</template>

<script>
	import { getUInfo } from '@/util/util.js'
	export default {
		data() {
			return {
				from: '', // 页面来源标识 delivery 发货页面
				type: '', // 发货页面传值 1 发货地址 2 收货地址
				data_list: [],
			}
		},

		onLoad(opts) {

			this.from = opts.from
			this.type = opts.type

			// 完成添加/编辑地址
			uni.$on('onAddrAddEdit', (data) => {
				console.log('监听到事件onAddrAddEdit，携带参数为：' + data.msg);
				this.getDataList()
			})
		},

		mounted() {
			this.getDataList()
		},

		methods: {

			// 点击item
			onItemClick(item) {
				if (this.from == 'delivery') {
					uni.$emit('onSelAddr', { msg: item, type: this.type })
					uni.navigateBack()
				}
			},

			// 编辑
			onEdit(item) {
				uni.navigateTo({ url: `/pages/mine/address_add?address=${JSON.stringify(item)}` })
			},

			// 删除
			onDel(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否删除该地址？',
					success: (res) => {
						res.confirm && that.delData(item.id)
					}
				})
			},

			// 添加地址
			onOk() {
				uni.navigateTo({ url: '/pages/mine/address_add' })
			},

			// 接口:数据列表
			async getDataList() {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '加载中', mask: true, })
				let res = await that.$getAddressList({ token, page: 1, page_size: 99 })
				if (res.code == 1) {
					this.data_list = res.data.data
					this.data_list = this.data_list.map((item, index) => {
						return item
					})
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			// 接口:删除数据
			async delData(id) {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '加载中', mask: true, })
				let res = await that.$delAddress({ token, id })
				if (res.code == 1) {
					that.getDataList()
					uni.showModal({ title: '提示', content: `${res.msg}`, showCancel: false, })
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.item_div {
		display: flex;
		flex-direction: column;
		margin: 24rpx;
		font-size: 28rpx;
	}

	/* 操作按钮容器 */
	.op_btn_div {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin: 20rpx 20rpx 0 0;
		font-size: 26rpx;
		color: #444;
	}

	.btn1 {
		width: 100rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		color: deepskyblue;
		border: solid deepskyblue 1rpx;
		border-radius: 8rpx;
		margin: 0 0 0 20rpx;
	}

	.btn2 {
		width: 100rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		color: yellowgreen;
		border: solid yellowgreen 1rpx;
		border-radius: 8rpx;
		margin: 0 0 0 20rpx;
	}

	.btn3 {
		width: 100rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		color: orangered;
		border: solid orangered 1rpx;
		border-radius: 8rpx;
		margin: 0 0 0 20rpx;
	}

	/* 底部按钮容器 */
	.bottom_btn_div {
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc(100%);
		margin: 40rpx 0rpx 0 0rpx;
		background-color: white;
	}

	#btn_ok {
		flex-grow: 1;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		font-weight: bold;
		background: #F7D34B;
		margin: 20rpx 40rpx 20rpx 40rpx;
		border-radius: 10rpx;
	}
</style>